<template>
  <div class="k3">
    <div class="cha1">
      <el-select v-model="value" filterable placeholder="个人信息查询">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>

    <div class="cha2">
      <el-button
        icon="el-icon-search"
        circle
        @click="clickPerson(value)"
      ></el-button>
    </div>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
export default {
  data() {
    return {
      options: [
        // {
        //   value: "选项1",
        //   label: "小王",
        // },
      ],
      value: "",
      classInfo: [], //订阅的消息
    };
  },
  mounted() {
    this.pubId = pubsub.subscribe("selectClassInfo", (msgName, data) => {
      this.classInfo = data;
      console.log("订阅的消息,", data);
      this.getInfo();
    });
  },
  methods: {
    clickPerson(item) {
      // console.log(item);
      // 获取当前路由路径
      const currentRoute = this.$router.currentRoute.path;
      // 目标路由路径
      const targetRoute = "/person";

      if (currentRoute !== targetRoute) {
        // 跳转到目标路由
        this.$router.push(targetRoute);
      }
      this.postStuId(item);
    },
    postStuId(stuId) {
      const classInfo = this.classInfo;
      setTimeout(function () {
        pubsub.publish("selectStuInfo", stuId);
        pubsub.publish("selectClassInfoToPerson", classInfo);
      }, 0);
    },
    getInfo() {
      this.$http({
        url: this.$http.adornUrl(
          `/chaoxing/stuinfo/listname/${this.classInfo.year}/${this.classInfo.college}/${this.classInfo.major}/${this.classInfo.className}`
        ),
        method: "get",
      }).then((response) => {
        // console.log("详细个人信息查询,", response.data.data);
        let options = [];
        for (let index in response.data.data) {
          let option = { value: "", label: "" };
          option.value = response.data.data[index].stuId;
          option.label = response.data.data[index].stuName;
          options[index] = option;
        }
        this.options = options;
      });
    },
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style scoped>
.k3 {
  width: 100%;
  height: 100%;
  /* display: flex;
  justify-content: center; */
  /* background-color: aliceblue; */
  position: relative;
  /*  flex-direction: row; */
}
.cha1 {
  /* float: left; */
  width: 40%;
  height: 100%;
  position: absolute;
  right:70px;
}
.cha2 {
  /* float: right; */
  width: 20%;
  height: 100%;
  position: absolute;
  right:-10px;
}
.el-select {
  /* float: right; */
  width: 100%;
  height: 100%;
}
/* .el-button {
  width: 2rem;
  height: 2rem;
} */
</style>
